<template>
  <div class="app-container main_h" v-loading="loading">
    <el-form ref="contract"  label-width="100px" class="demo-ruleForm" style="max-width: 500px;">
      <el-form-item label="客户名称" prop="contract_no" class="bottom0">
        {{contract.adname}}
      </el-form-item>
      <el-form-item label="合同编号" prop="contract_no"  class="bottom0">
       {{contract.contract_no}}
      </el-form-item>
      <el-form-item label="媒体政策" prop="title"  class="bottom0">
        {{contract.mht_title}}
      </el-form-item>
      <el-form-item label="产品线" prop="product_line"  class="bottom0">
        {{contract.product_line_name}}
      </el-form-item>
      <el-form-item label="合同时间"  class="bottom0">
        {{contract.start}} - {{contract.end}}
      </el-form-item>
      <el-form-item label="金额" prop="money" class="bottom0">
        {{contract.money}}
      </el-form-item>
      <el-form-item label="返点" prop="rebate"  class="bottom0">
        {{contract.rebate}}%
      </el-form-item>
      <el-form-item label="显示金额" prop="show_money" class="bottom0">
        {{contract.show_money}}
      </el-form-item>
      <el-form-item label="付款方式" prop="pay_type" class="bottom0">
        <span v-if="contract.pay_type==1">预付</span>
        <span v-else-if="contract.pay_type==2">垫付</span>
      </el-form-item>
      <el-form-item label="回款周期" class="bottom0" v-show="contract.pay_type==2">
        {{contract.cycle}} 天
      </el-form-item>
      <el-form-item label="备注" prop="note" class="bottom0">
        {{contract.note}}
      </el-form-item>
      <el-form-item label="提交人" prop="note" class="bottom0">
        {{contract.name}}
      </el-form-item>
    </el-form>
    <infoExamine :info="contract" v-on:func="getInfo" v-bind="$attrs" v-on="$listeners"></infoExamine>
  </div>
</template>

<script>
    import infoExamine from '@/components/CrmComponents/InfoExamine.vue';
    import Resource from '@/api/resource';
    const apiResource = new Resource('contract');
    export default {
        name: "info",
        props: ['id'],
        data(){
            return {
                contract:[],
                loading: true,
            }
        },
        watch:{
            id:function () {
                this.getInfo(this.id);
            }
        },
        created() {
            //console.log(this.contract);
            this.getInfo(this.id);
        },
        methods:{
          async getInfo(id){
              this.loading=true;
              const { data } = await apiResource.get(id);
              this.contract = data;
              this.loading=false;
          }

        },
        components: {
            infoExamine
        }

    }
</script>

<style>
  .main_h .el-form-item__label,.el-form-item__content { font-size: 13px !important; text-align: left}
  .main_h{ margin-left: 3%;}
  .bottom0 { margin-bottom: 0px;}
</style>
